<!DOCTYPE html>
<html>
<head>
	<title>Human Of Yogyakarta</title>
	<link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-2.1.3.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<link href="css/hoy.css" rel="stylesheet">
</head>
<body>
	<!--Navbar tampilan kecil-->
	<nav class=" hoynavxs visible-xs">
		<div class="col-xs-2 brnadlogoxs">
			<img class="imgsizexs" src="img/logowhite.png" width="100%">
		</div>
		<div class="col-xs-6 fbgroupxs"><i class="fa fa-facebook-official"></i></div>
		<div class="col-xs-4">
			<div class="row">
				<div class="col-xs-4 medsoshoyxs"><i class="fa fa-twitter"></i></div>
				<div class="col-xs-4 medsoshoyxs"><i class="fa fa-instagram"></i></div>
				<div class="col-xs-4 medsoshoyxs"><i class="fa fa-youtube-play"></i></div>
			</div>
		</div>
		<div class="sambungfloat"></div>
	</nav>
	<!--Navbar tampilan besar-->
	<nav class="hoynavbox hidden-xs">
		<div class="navbox">
			<div class="col-md-4 col-sm-4 bghitam">
				<div class="col-md-3 col-sm-3 brnadlogo">
					<img class="imgsize" src="img/logowhite.png" width="100%">
				</div>
				<div class="col-md-9 col-sm-9 visible-md visible-lg">
					<h2 class="txtbrand" >HUMAN OF YOGYAKARTA</h2>
				</div>
			</div>
			<div class="col-md-6 col-sm-6 fbgroup2 tengah visible-xs visible-sm ">
				<i class="fa fa-facebook-official"></i> Join on Facebook
			</div>
			<div class="col-md-6 col-sm-6 fbgroup tengah visible-md visible-lg">
				<i class="fa fa-facebook-official"></i> Join The Conversation on Facebook
			</div>
			<div class="col-md-2 col-sm-2">
				<div class="row">
					<div class="col-md-4 col-sm-4 medsoshoy"><i class="fa fa-twitter"></i></div>
					<div class="col-md-4 col-sm-4 medsoshoy"><i class="fa fa-instagram"></i></div>
					<div class="col-md-4 col-sm-4 medsoshoy"><i class="fa fa-youtube-play"></i></div>
				</div>
			</div>
			<div class="sambungfloat"></div>
		</div>
	</nav>
	<!--subnav tampilan besar-->
	<div class="imgpjg visible-md visible-lg">
		<img src="img/pop.png" width="100%">
		<div class="imgpjglist">
			<div class="row">
				<div class="col-md-3"></div>
				<div class="col-md-6">
					<div class="col-md-3 menavbtm">JOGJA</div>
					<div class="col-md-3 menavbtm">ABOUT</div>
					<div class="col-md-3 menavbtm">PHOTOGRAPHER</div>
					<div class="col-md-3 menavbtm">ARCHIVE</div>
				</div>
				<div class="col-md-3"></div>
			</div>
		</div>
	</div>
	<!--subnavbar tampian kecil-->
	<div class="imgpjgsm visible-sm visible-xs">
		<div class="menavbtmsm">JOGJA</div>
		<div class="menavbtmsm">ABOUT</div>
		<div class="menavbtmsm">PHOTOGRAPHER</div>
		<div class="menavbtmsm">ARCHIVE</div>
		<div class="sambungfloat"></div>
	</div>
	<!--Post tampilan besar-->
	<div class="navbox hoy-ats hidden-xs hidden-sm">
		<div class="col-md-8 menpad">
			<div class="hoybox">
				<div class="imghoypost">
					<img src="img/post/5.jpg" width="100%">
					<div class="katlbl">1.342 <i class="fa fa-eye"></i></div>
				</div>
				<div class="hoypostdes">
					I was working as a correction officer at Rikers Island, but I was having money problems. My child support had just been increased, and after all the payments were taken out, nothing was left. I remember getting a check one time for $39. So I began to make some bad decisions. Inside of prison, a single cigarette can sell for $50. Not a pack. A single cigarette. So I started smuggling in contraband and selling it to the prisoners. Pretty soon I had a whole operation going. I did it for years. At times, I was making hundreds of dollars a day. But they caught me. One day I arranged to meet with an inmate’s family to set up a deal, and it ended up being a sting. I went to prison for two years, as an inmate.  
				</div>
				<div class="hoysharedbox">
					<div class="sharditem2"><i class="fa fa-share"></i> 1465 share</div>
					<div class="sharditem2"><i class="fa fa-comments-o"></i> 345 comment</div>
					<div class="sharditem2"><i class="fa fa-thumbs-o-down"></i> 2 dislike</div>
					<div class="sharditem2"><i class="fa fa-thumbs-o-up"></i> 1333 like</div>
					<div class="sambungfloat"></div>
				</div>
			</div>
			<div class="hoybox">
				<div class="hoymainlbl">Comment</div>
				<!--strart commnet-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoyobj" src="img/userimage/usr1.png" alt="user image"></a>
					<div class="media-body">
						<h4 class="media-heading hoylblcom">Username comment one</h4>
						<div class="hoyisicom">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
							tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						</div>
					</div>
				</div>

				<!--strart commnet-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoyobj" src="img/userimage/usr2.png" alt="user image"></a>
					<div class="media-body">
						<h4 class="media-heading hoylblcom">Username comment two</h4>
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						</div>
					</div>
				</div>

				<!-- username loggin commnet-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoyobj" src="img/userimage/usr3.png" alt="user image"></a>
					<div class="media-body">
						<h4 class="media-heading hoylblcom">Username still login</h4>
						<textarea class="form-control" rows="2" placeholder="yout comment here ..."></textarea>
						<button class="btn btn-default kanan hoy-ats">comment</button>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-4 menpad">
			<div class="hoybox">
				<div class="hoymainlbl">Best Human of Jogja</div>
				<!--strart best human-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoylblsubpost" src="img/userimage/usr2.png" alt="user image"></a>
					<div class="media-body">
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ...
						</div>
					</div>
				</div>
				<!--strart best human-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoylblsubpost" src="img/userimage/usr1.png" alt="user image"></a>
					<div class="media-body">
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ...
						</div>
					</div>
				</div>
				<!--strart best human-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoylblsubpost" src="img/userimage/usr3.png" alt="user image"></a>
					<div class="media-body">
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ...
						</div>
					</div>
				</div>
				<!--strart best human-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoylblsubpost" src="img/userimage/usr4.png" alt="user image"></a>
					<div class="media-body">
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ...
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="sambungfloat"></div>
	</div>
	<!--Post tampilan sedang-->
	<div class="hoy-ats visible-sm">
		<div class="col-sm-8 menpad">
			<div class="hoybox">
				<div class="imghoypost">
					<img src="img/post/5.jpg" width="100%">
					<div class="katlbl">1.342 <i class="fa fa-eye"></i></div>
				</div>
				<div class="hoypostdes">
					I was working as a correction officer at Rikers Island, but I was having money problems. My child support had just been increased, and after all the payments were taken out, nothing was left. I remember getting a check one time for $39. So I began to make some bad decisions. Inside of prison, a single cigarette can sell for $50. Not a pack. A single cigarette. So I started smuggling in contraband and selling it to the prisoners. Pretty soon I had a whole operation going. I did it for years. At times, I was making hundreds of dollars a day. But they caught me. One day I arranged to meet with an inmate’s family to set up a deal, and it ended up being a sting. I went to prison for two years, as an inmate.  
				</div>
				<div class="hoysharedbox">
					<div class="sharditem2"><i class="fa fa-share"></i> 1465 share</div>
					<div class="sharditem2"><i class="fa fa-comments-o"></i> 345 comment</div>
					<div class="sharditem2"><i class="fa fa-thumbs-o-down"></i> 2 dislike</div>
					<div class="sharditem2"><i class="fa fa-thumbs-o-up"></i> 1333 like</div>
					<div class="sambungfloat"></div>
				</div>
			</div>
			<div class="hoybox">
				<div class="hoymainlbl">Comment</div>
				<!--strart commnet-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoyobj" src="img/userimage/usr1.png" alt="user image"></a>
					<div class="media-body">
						<h4 class="media-heading hoylblcom">Username comment one</h4>
						<div class="hoyisicom">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
							tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						</div>
					</div>
				</div>

				<!--strart commnet-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoyobj" src="img/userimage/usr2.png" alt="user image"></a>
					<div class="media-body">
						<h4 class="media-heading hoylblcom">Username comment two</h4>
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						</div>
					</div>
				</div>

				<!-- username loggin commnet-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoyobj" src="img/userimage/usr3.png" alt="user image"></a>
					<div class="media-body">
						<h4 class="media-heading hoylblcom">Username still login</h4>
						<textarea class="form-control" rows="2" placeholder="yout comment here ..."></textarea>
						<button class="btn btn-default kanan hoy-ats">comment</button>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-4 menpad">
			<div class="hoybox">
				<div class="hoymainlbl">Best Human of Jogja</div>
				<!--strart best human-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoylblsubpost" src="img/userimage/usr2.png" alt="user image"></a>
					<div class="media-body">
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ...
						</div>
					</div>
				</div>
				<!--strart best human-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoylblsubpost" src="img/userimage/usr1.png" alt="user image"></a>
					<div class="media-body">
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ...
						</div>
					</div>
				</div>
				<!--strart best human-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoylblsubpost" src="img/userimage/usr3.png" alt="user image"></a>
					<div class="media-body">
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ...
						</div>
					</div>
				</div>
				<!--strart best human-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoylblsubpost" src="img/userimage/usr4.png" alt="user image"></a>
					<div class="media-body">
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ...
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="sambungfloat"></div>
	</div>

	<!--Post tampilan kecil [mobile]-->
	<div class="hoy-ats visible-xs">
		<div class="col-xs-12 menpad">
			<div class="hoybox">
				<div class="imghoypost">
					<img src="img/post/5.jpg" width="100%">
					<div class="katlbl">1.342 <i class="fa fa-eye"></i></div>
				</div>
				<div class="hoypostdes">
					I was working as a correction officer at Rikers Island, but I was having money problems. My child support had just been increased, and after all the payments were taken out, nothing was left. I remember getting a check one time for $39. So I began to make some bad decisions. Inside of prison, a single cigarette can sell for $50. Not a pack. A single cigarette. So I started smuggling in contraband and selling it to the prisoners. Pretty soon I had a whole operation going. I did it for years. At times, I was making hundreds of dollars a day. But they caught me. One day I arranged to meet with an inmate’s family to set up a deal, and it ended up being a sting. I went to prison for two years, as an inmate.  
				</div>
				<div class="hoysharedbox">
					<div class="sharditem2"><i class="fa fa-share"></i> 1465 share</div>
					<div class="sharditem2"><i class="fa fa-comments-o"></i> 345 comment</div>
					<div class="sharditem2"><i class="fa fa-thumbs-o-down"></i> 2 dislike</div>
					<div class="sharditem2"><i class="fa fa-thumbs-o-up"></i> 1333 like</div>
					<div class="sambungfloat"></div>
				</div>
			</div>
			<div class="hoybox">
				<div class="hoymainlbl">Comment</div>
				<!--strart commnet-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoyobj" src="img/userimage/usr1.png" alt="user image"></a>
					<div class="media-body">
						<h4 class="media-heading hoylblcom">Username comment one</h4>
						<div class="hoyisicom">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
							tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						</div>
					</div>
				</div>

				<!--strart commnet-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoyobj" src="img/userimage/usr2.png" alt="user image"></a>
					<div class="media-body">
						<h4 class="media-heading hoylblcom">Username comment two</h4>
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						</div>
					</div>
				</div>

				<!-- username loggin commnet-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoyobj" src="img/userimage/usr3.png" alt="user image"></a>
					<div class="media-body">
						<h4 class="media-heading hoylblcom">Username still login</h4>
						<textarea class="form-control" rows="2" placeholder="yout comment here ..."></textarea>
						<button class="btn btn-default kanan hoy-ats">comment</button>
					</div>
				</div>
			</div>
		</div>
		<div class="col-xs-12 menpad">
			<div class="hoybox">
				<div class="hoymainlbl">Best Human of Jogja</div>
				<!--strart best human-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoylblsubpost" src="img/userimage/usr2.png" alt="user image"></a>
					<div class="media-body">
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ...
						</div>
					</div>
				</div>
				<!--strart best human-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoylblsubpost" src="img/userimage/usr1.png" alt="user image"></a>
					<div class="media-body">
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ...
						</div>
					</div>
				</div>
				<!--strart best human-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoylblsubpost" src="img/userimage/usr3.png" alt="user image"></a>
					<div class="media-body">
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ...
						</div>
					</div>
				</div>
				<!--strart best human-->
				<div class="media">
					<a class="pull-left" href="#"><img class="media-object hoylblsubpost" src="img/userimage/usr4.png" alt="user image"></a>
					<div class="media-body">
						<div class="hoyisicom">
							ididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco laboris nisi ut aliquip ...
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="sambungfloat"></div>
	</div>
</body>
</html>